import React from 'react';
import { Layout, Row, Col, Card, Button } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import DataOverview from './components/DataOverview';
import AnnouncementList from './components/AnnouncementList';
import MessageList from './components/MessageList';
import ProcessMonitor from './components/ProcessMonitor';
import styles from './Home.module.less';

const { Content } = Layout;

const Home: React.FC = () => {
  const navigate = useNavigate();

  return (
    <MainLayout>
      <Content className={styles.content}>
        {/* 数据概览卡片 */}
        <DataOverview />

        {/* 公告和消息 */}
        <Row gutter={24} className={styles.mainContent}>
          <Col span={12}>
            <Card 
              title="公告栏" 
              className={styles.sectionCard}
              extra={
                <Button type="link" onClick={() => navigate('/announcement')}>
                  查看更多 <RightOutlined />
                </Button>
              }
            >
              <AnnouncementList />
            </Card>
          </Col>
          <Col span={12}>
            <Card 
              title="消息提醒" 
              className={styles.sectionCard}
              extra={
                <Button type="link" onClick={() => navigate('/message')}>
                  查看更多 <RightOutlined />
                </Button>
              }
            >
              <MessageList />
            </Card>
          </Col>
        </Row>

        {/* 监管进程 */}
        <Card 
          title="监管进程" 
          className={`${styles.sectionCard} ${styles.processCard}`}
          extra={
            <Button type="link" onClick={() => navigate('/process-list')}>
              查看更多 <RightOutlined />
            </Button>
          }
        >
          <ProcessMonitor />
        </Card>
      </Content>
    </MainLayout>
  );
};

export default Home; 